<template>
  <div id="userRegister">
    <div id="registerMain" v-show="!registered">
      <div id="emailInfo">
        <input type="text" id="registerEmail" name="r_email" v-model="email" placeholder="邮箱"></input>
      </div>
      <div id="usernameInfo">
        <input type="text" id="registerUsername" name="r_username" v-model="username" placeholder="用户名"></input>
      </div>
      <div id="passwordInfo">
        <input type="password" id="registerPassword" name="r_password" v-model="password" placeholder="密码"></input>
        <span id="seePasswordFlog" class="glyphicon glyphicon-eye-close"></span>
      </div>
      <div id="passwordSureInfo">
        <input type="password" id="registerPasswordSure" name="r_passwordSure" v-model="passwordSure" placeholder="确认密码"></input>
      </div>
      <div id="registerOpt">
        <input type="button" id="registerBtn" value="注册" @click="register"/>
      </div>
      <div id="otherOpts">
        <button id="registerOpt">
          <router-link to="/admin/login">已注册--登录</router-link>
        </button>
      </div>
    </div>
    <div id="userRegisterSuccess" v-show="registered">
      <span>{{ result }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'register',
    data () {
      return {
        email: '',
        username: '',
        password: '',
        passwordSure: '',
        registered: false,
        result: '',
      }
    },
    computed: {
    
    },
    methods: {
      register() {
        debugger;
        var self = this;
        var flag =  this.checkEmail(this.email)
                && this.checkUsername(this.username)
                && this.checkPassword(this.password)
                && this.checkPasswordSure(this.password, this.passwordSure);
                
        if(flag){
          $.post({
            url: '/start/user/register',
            data: {
              email: this.email,
              username: this.username,
              password: this.password
            },
            success: function(result){
              debugger;
              self.registered = true;
              if(result == 'success'){
                self.result = '注册成功!';
                setTimeout(() => {
                  location.hash = '/admin/login';
                }, 1500);
              }else if(result == 'invalid'){
                self.result = '注册失败，邮箱无效!';
                setTimeout(() => {
                  location.reload()
                }, 3000);
              }else{
                self.result = '注册失败!';
                setTimeout(() => {
                  location.reload()
                }, 3000);
              }
            },
            error: function(error){
              self.registered = true;
              self.result = '注册失败!';
              setTimeout(() => {
                //location.reload()
              }, 3000);
            }
          });
        }
      },

      checkEmail(email) {
        debugger;
        var alertText = null;
        var reg = /^\w+[@]\w+[.][\w.]+$/;
        if(reg.test(email)){
          $.post({
            url: '/start/user/checkEmail',
            async: false,
            data: {
              email: this.email,
            },
            success: function(result){
              debugger;
              if(result == 'false'){
                alertText = '邮箱已被注册,可以直接登录！';
              }else if(result == 'error'){
                alertText = '邮箱验证失败！';
              }
            },
            error: function(error){
              alertText = '邮箱验证失败！';
            }
          });
        }else{
          alertText = '邮件格式有误！';
        }
        
        if(alertText == null){
          return true;
        }else{
          alert(alertText);
          return false;
        }
      },

      checkUsername(username) {
        debugger;
        if(username.length >= 3){
          return true;
        }else if(username.length > 0){
          alert('用户名不能少于3个问题.');
        }else{
          alert('用户名不能为空.');
        }
        return false;
      },
    
      checkPassword(password) {
        debugger;
        var reg = /^(\w){6,20}$/;
        if(reg.test(password)){
          return true;
        }
        alert('密码格式有误.');
        return false;
      },

      checkPasswordSure(password, passwordSure) {
        debugger;
        if(password == passwordSure){
          return true;
        }
        alert('两次输入密码不相同.');
        return false;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  #registerMain{
    max-width: 500px;
    margin: 30px auto;
    padding: 30px 0;
    border: 1px solid #ccc;
    webkit-box-shadow: 0px 3px 10px #a1a1a1;
    box-shadow: 0px 3px 10px #a1a1a1;
  }

  #registerMain > div{
    width: calc(100% - 60px);
    margin: 0 auto;
    color: #222;
    margin-top: 15px;
  }

  #usernameInfo, #emailInfo, #passwordInfo, #passwordSureInfo{
    padding: 0 15px;
    background-color: #fff;
    text-align: left;
    border: 1px solid #ccc;
  }
  #passwordInfo{
    padding-right: 0;
  }
  #registerUsername, #registerEmail, #registerPassword, #registerPasswordSure{
    width: calc(100% - 30px);
    height: 40px;
    border: 0;
    background-color: #fff;
  }
  #registerUsername:focus, #registerEmail:focus, #registerPassword:focus, #registerPasswordSure:focus{
    outline: 0;
  }
  #seePasswordFlog{
    background: #fff;
    border: 0;
    color: #888;
  }

  #registerBtn{
    width: 100%;
    height: 40px;
    border: 0;
    background-color: #1d9af9;
    color: #222;
  }

  #otherOpts{
    text-align: right;
    line-height: 40px;
  }
  #otherOpts button{
    border: 0;
    background-color: rgba(0,0,0,0);
  }
  #otherOpts a{
    color: #222;
  }

  #userRegisterSuccess{
    width: 100%;
    height: 262px;
    font-size: 30px;
    font-weight: bold;
    color: #222;
    line-height: 262px;
  }
  
  #otherOpts{
    text-align: right;
  }
</style>
